<template>
  <basic-dialog
    :visible="visible"
    :title="'选择SPU'"
    :show-footer="false"
    :show-close="false"
    :width="'60%'"
  >
    <div class="form-container">
      <el-form ref="queryData" :inline="true" :model="queryData">
        <el-form-item label="SPU编码" prop="spuNo">
          <el-input
            v-model="queryData.spuNo"
            placeholder="请输入SPU编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="productNameFinal">
          <el-input
            v-model="queryData.productNameFinal"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQueryData(1)">查询</el-button>
          <el-button @click="handleResetData('queryData')">清空</el-button>
          <el-button ghost @click="handleCloseDialog(0)">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
    <basic-table
      :loading="tableLoading"
      :columns="tableColumns"
      :dataSource="tableData"
      :pagination="pagination"
      :pageSizes="pageSizes"
      :tableHeight="480"
      :showSelectCol="false"
      :showActionCol="true"
      :actionRender="actionRender"
      @rowDblclick="handleSelectSpu"
      @pageChange="handlePageChange"
      @pageSizeChange="handlePageSizeChange"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicTable from '@/components/BasicTable';
import SkuTable from '@/components/skusTable';
import { ApiRequest } from '@api/basePage';
import { isResponseSuccess } from '@/utils/bizUtils';
import { getBtnsId } from '@/libs/btnsPermission';

export default {
  name: 'SelectSpuDialog',
  components: {
    BasicDialog,
    BasicTable,
    SkuTable
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
  },
  data () {
    return {
      tableLoading: false,
      selectSpuLoading: false,
      pageSizes: [10, 20, 30, 40],
      pagination: {
        nowPage: 1,
        totalNum: 0,
        pageShow: 10,
      },
      // 批量关联skulist
      selectRows: [],
      queryData: {
        spuNo: '', // spu编码
        productNameFinal: '', // 商品名称
        queryType: 20 // 查spu时多传个queryType，后端根据queryType决定是否返回其它信息；对于当前的接口调用传20，接口多返回spu所属品牌是否需要商品条形码
      },
      tableData: [],
      tableColumns: [
        {
          title: '商品名称',
          key: 'productNameFinal'
        },
        {
          title: 'SPU编码',
          key: 'spuNo'
        },
        {
          title: '品牌',
          key: 'brandName'
        }
      ],
    };
  },

  computed: {
    visible () {
      return this.dialogVisible;
    }
  },
  methods: {
    actionRender (h, { row }) {
      return (
        <div class="table-action">
          <el-button
            size="mini"
            type="text"
            loading={this.selectSpuLoading}
            onClick={() => this.handleSelectSpu(row)}
          >选择</el-button>
        </div>
      );
    },
    handleSelectSpu (row) {
      var paramObj = {};
      paramObj.productUuid = row.uuid;
      paramObj.hasBarcode = row.hasBarcode;
      this.handleCloseDialog(paramObj);
    },
    handleQueryData (pageNum) {
      if (pageNum) {
        this.pagination.nowPage = pageNum;
      }
      const { nowPage, pageShow } = this.pagination;
      const pageData = {
        nowPage,
        pageShow
      };
      let curBtnId = getBtnsId('关联-查询');
      sessionStorage.setItem('buttonId', curBtnId);
      this.tableLoading = true;
      ApiRequest(
        '/sysback/product/spuinfo/getProductMainQueryList',
        'post',
        { ...this.queryData, ...pageData },
        false
      )
        .then((res) => {
          this.tableLoading = false;
          if (isResponseSuccess(res)) {
            const { results, totalNum } = res.retData;
            this.tableData = results;
            this.pagination.totalNum = totalNum;
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
    // 分页状态变更回调
    handlePageChange (pageNum) {
      this.pagination.nowPage = pageNum;
      this.handleQueryData();
    },
    // 分页状态变更回调
    handlePageSizeChange (pageSize) {
      this.pagination.pageShow = pageSize;
      this.handleQueryData(1);
    },
    handleResetData (formName) {
      this.$refs[formName].resetFields();
    },
    // 关闭弹框
    handleCloseDialog (paramObj) {
      if (paramObj && paramObj.productUuid) {
        return this.$emit('hide-handler', paramObj);
      }
      this.$emit('hide-handler');
    }
  }
};
</script>
<style scoped>
.form-container {
  margin-bottom: 10px;
}
</style>
